<script setup lang="ts">
import { onMounted, provide, ref } from 'vue';
import UiLayer from './UiLayer.vue';
import { createApp } from '../lib/app';
import { resources } from '../lib/resources';
import { createPoles } from '../lib/pole';
import { createCashWindow } from '../lib/cashwindow';
import { buildCarInRoad } from '../lib/car';
import { createNotice } from '../lib/util';
const isLoaded = ref(false);

onMounted(async () => {
  
  const app = createApp("map3dContainer");
 
  provide("app", app); // 给子组件注入地图对象
 
  let allResources = await app.loadResources(resources, {
      showShadertoy: false,
      showHtml: true
  })
  isLoaded.value = true;
 
  let modelToll = allResources.getModel("toll")
  modelToll.addTo(app);
  

  // 设置背景和环境
  app.setBackgroundEnvironment({
    background: {
      texture: allResources.getResource("skybox")
    }
  })

 
  // 增加抬杆相关操作
  const poles = createPoles(app);

  // 增加收费窗口相关操作
  const cashwndEnts = createCashWindow(app);

 
  // 车相关操作
  const runCarInRoad = async (num) => {
    while(true) {
      await buildCarInRoad(app, num, poles[num - 1]);
    }
  }
  for(let i = 1; i <= 8; i++) {
    runCarInRoad(i)
  }

  
  // 创建一个公告牌
  createNotice(app);
})

</script>

<template>
  <div id="map3dContainer"></div>
  <UiLayer v-if="isLoaded"></UiLayer>
</template>

<style scoped>
 #map3dContainer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000117;
  }
</style>
